<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <!-- 双向数据绑定：输入和输出 -->
      <!-- 输入框绑定的是value -->
      <input type="text" v-model="a" /><span>{{ a }}</span>
      <br>
      <input type="radio" name="abc" value="0" v-model="sex" />
      <input type="radio" name="abc" value="1" v-model="sex" />
      <span>{{sex}}</span>
      <br>
      <input type="checkbox" v-model="flag"/><span>{{flag}}</span>
      <br>
      <input type="checkbox" v-model="arr" name="like" value="篮球"/>
      <input type="checkbox" v-model="arr" name="like" value="足球"/>
      <input type="checkbox" v-model="arr" name="like" value="排球"/>
      <span>{{arr}}</span>
      <br>
      <select v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
      </select>
      <span>{{city}}</span>
      <br>
      <textarea v-model="txt"></textarea><span>{{txt}}</span>
      <br>
    </div>
    <!-- 双向数据绑定的原理（使用原生js模拟） -->
    <div class="box">
      <input type="text" ly-model="msg" id="txt">
      <span id="span">{{msg}}</span>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    
    const vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue的双向数据绑定",
        a:"hello",
        sex:0,
        flag:true,
        arr:[],
        city:"",
        txt:""
      }
    })
    
    
    
    
    // 使用原生js模拟vue的双向数据绑定
    
    var obj = {
      _msg:"自定义的双向数据绑定",
      init(){
        this.txt = document.getElementById("txt");
        this.span = document.getElementById("span");
        this.spanInner = this.span.innerHTML;
        
        this.msg;
      },
      // getter
      get msg(){
        this.span.innerHTML = this.spanInner.replace(/\{\{msg\}\}/, this._msg);
        if(this.txt.getAttribute("ly-model") === "msg"){
          this.txt.value = this._msg
        }
        return this._msg;
      },
      // setter
      set msg(v){
        this.span.innerHTML = this.spanInner.replace(/\{\{msg\}\}/, v);
        this._msg = v;
      }
    }
    obj.init();
    
    
    var otxt = document.getElementById("txt");
    otxt.oninput = function(){
      obj.msg = this.value
    }
    
    
  </script>
</html>
